import React from 'react' 
import ReactDOM from 'react-dom'    
import './css/Popup.css'
 import { Modal, Button } from 'antd';  
 import { DatePicker } from 'antd'; 
const { MonthPicker, RangePicker } = DatePicker;
import { Tree } from 'antd';
const TreeNode = Tree.TreeNode;
import Tabs from '../../component/Tabs/Tabs'  
 
class Popup extends React.Component {
    constructor(props) {
        super(props) 
    }

    config={//相关配置
        theme:'default',
        title:'弹窗标题',
        visible:true,//弹窗的关闭打开
        nextTxt:'保存', 
        nextStyle:{ display:'inline-block',marginRight:'5px', padding:'5px 10px',  borderColor: '#108ee9',color:'#fff',backgroundColor:'#108ee9',borderRadius:'3px',textAlign:'center'},
        nextFn : () => { 
            setTimeout(() => {
                this.config.visible =false ;
                this.setState({})
            }, 2000);
        }, 
        otherText:'重置', 
        otherStyle:{ display:'inline-block', padding:'5px 10px',  border: '1px solid #d9d9d9',color:'#000',backgroundColor:'#fff',borderRadius:'3px',textAlign:'center'},
        otherFn : () => {
            this.config.visible =false 
            this.setState({ });
        },
        tabsDatas : [
            {
                text: '关闭响应',
                value: 0
            },{
                text: '调整等级',
                value: 1
            } 
        ],
        tabsClick :(item, index) => {
            console.log(item, index);
        },
        tabsConfig : {
            // color: '#FFF',
            type: 'card'
        },
        tree:{
            show:false,
            checkedKeys: [ ],//默认选中的对象
            selectedKeys: [ ],//树节点触发对象
            expandedKeys: ['0'],//默认展开的节点
            autoExpandParent:true,
            data:[
                {
                    title: '0',
                    key: '0',
                    data: [
                         {
                            title: '0-0',
                            key: '0-0',
                            data: [{
                                title: '0-0-0',
                                key: '0-0-0',
                                data: [
                                { title: '0-0-0-0', key: '0-0-0-0' },
                                { title: '0-0-0-1', key: '0-0-0-1' },
                                { title: '0-0-0-2', key: '0-0-0-2' },
                                ],
                            }, {
                                title: '0-0-1',
                                key: '0-0-1',
                                data: [
                                { title: '0-0-1-0', key: '0-0-1-0' },
                                { title: '0-0-1-1', key: '0-0-1-1' },
                                { title: '0-0-1-2', key: '0-0-1-2' },
                                ],
                            }, {
                                title: '0-0-2',
                                key: '0-0-2',
                            }],
                            }, {
                            title: '0-1',
                            key: '0-1',
                            data: [
                                { title: '0-1-0-0', key: '0-1-0-0' },
                                { title: '0-1-0-1', key: '0-1-0-1' },
                                { title: '0-1-0-2', key: '0-1-0-2' },
                            ],
                            }, {
                            title: '0-2',
                            key: '0-2',
                        }
                    ]
                }
               ]
        },
        data:[
          {
              data:[
                    {
                        name:'调整级别',
                        type:'btn',
                        currentLev:'一级',
                        btnClick:(data,index)=>{
                            data.data.map((item,i)=>{
                                if(i==index){
                                    item.class='normal active';
                                   data.currentLev =item.name;
                                }else{
                                    item.class ='normal'
                                }
                            }) 
                            this.setState({})

                        },
                        data:[{
                            name:'一级',
                            class:'normal active',
                        },{
                            name:'二级',
                            class:'normal',
                        },{
                            name:'三级',
                            class:'normal',
                        },{
                            name:'四级',
                            class:'normal',
                        }]
                    },
                    {
                        name:'通知内容',
                        type:'input',
                        itemStyle:{width:'100%'},
                        content:'',
                        inputChange:(e,data)=>{ 
                            data.content = e.target.value; 
                            this.setState({})
                        }
                    },
                    {
                        name:'调整时间',
                        type:'singleTime',
                        dateFormat: 'YYYY-MM-DD HH:mm',
                        disabledSeconds:true,//禁用秒
                        // itemStyle:{width:'50%'},
                        timeChange:(date, dateString)=> {
                            console.log(date, dateString);
                        },
                        getTime:(value)=>{
                             console.log('getTime: ', value);
                        }
                    },
                    {
                        name:'通知对象',
                        type:'custonLabel',//自定义的label
                        itemStyle:{width:'100%'},
                        btnTxt:'增加',
                        btnStyle:{      height: '30px',  display:'inline-block',marginLeft:'5px', padding:'5px 10px',color:'#5d77aa',backgroundColor:'#ddd',borderRadius:'3px',textAlign:'center'},
                        btnClick: () => {
                           if( this.config.tree){//存在树的数据
                              this.config.tree.show =true;
                              this.setState({})
                           } 
                        },
                        data:[ ]
                    }
              ]
          }
        ]
    }

    info={
        
    }
 
    componentWillMount = () => {
        if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config); 
    } 
    componentDidMount = () => {   } 
 
    saveClick = ( data) => {     } 
  
   treeExpand = (expandedKeys) => {
    console.log('onExpand', arguments); 
    this.config.tree.expandedKeys = expandedKeys;
    this.config.tree.autoExpandParent =false;
    this.setState({}) 
  }
 
    treeCheck = (checkedKeys) => {//	点击复选框触发
        console.log('onCheck', checkedKeys);
        this.config.tree.checkedKeys =checkedKeys;
        this.config.data[0].data[this.config.data[0].data.length-1].data=checkedKeys;
        this.setState({  });
    }

    treeSelect = (selectedKeys, info) => {//点击树节点触发
        console.log('onSelect', selectedKeys);
        this.config.tree.selectedKeys =selectedKeys; 
        this.setState({ });
    }
    renderTreeNodes = (data) => {
        return data.map((item) => {
        if (item.data) {
            return (
            <TreeNode title={item.title} key={item.key} dataRef={item}>
                {this.renderTreeNodes(item.data)}
            </TreeNode>
            );
        }
        return <TreeNode {...item} />;
        });
    }
    showModal = () => {
        this.config.visible=true;
        this.setState({}) 
    }
    searchFn = (e) =>{
        let value = e.target.value;
        
    }
    render() {    
        let  showData =this.config.data[0].data;
        let rightC='';
 
        let disabledSeconds =(s,h)=> { 
            return []
        }
        let allshow =(s,h)=> { 
            return []
        } 
        return (
           <div className='popup'>
                <div type="primary" onClick={this.showModal}>
                Open
                </div>
                <Modal
                    wrapClassName={this.config.theme}
                    visible={this.config.visible}
                    title={this.config.title}
                    onOk={this.config.nextFn}
                    onCancel={this.config.otherFn}
                    footer={[
                        <div  onClick={this.config.nextFn} style={this.config.nextStyle}>  {this.config.nextTxt} </div>,
                        <div  onClick={this.config.otherFn} style={this.config.otherStyle}>{this.config.otherText}</div>,
                    ]}
                >
                <Tabs dataSource={this.config.tabsDatas} onClick={this.config.tabsClick} config={this.config.tabsConfig} />
                <div className='main'>
                    <div className='leftWrap'>
                        { 
                           showData.map((item,i)=>{ 
                               switch(item.type){
                                    case 'btn':
                                        return(
                                            <div>
                                                <label for="">{item.name}</label>
                                                    <div className='rightC'>
                                                        {
                                                            item.data.map((jtem,j)=>{
                                                                return (
                                                                    <span className={jtem.class} onClick = {()=>item.btnClick(item,j)}>{jtem.name}</span>
                                                                )
                                                            })
                                                        }
                                                    </div>
                                                        
                                            </div>
                                        )
                                       break;
                                    case 'input':
                                            return(
                                                <div>
                                                    <label for="">{item.name}</label>
                                                        <div className='rightC'>
                                                             <input type="" name="" value={item.content} style={item.itemStyle} onChange={()=>item.inputChange(event,item)}/>
                                                        </div> 
                                                </div>
                                            )
                                     break;
                                    case 'singleTime':
                                           return(
                                                <div>
                                                    <label for="">{item.name}</label>
                                                        <div className='rightC'>
                                                          <DatePicker 
                                                            showTime
                                                            showToday
                                                            disabledSeconds={this.config.disabledSeconds?disabledSeconds:allshow} 
                                                            hideDisabledOptions 
                                                            format={item.dateFormat}  
                                                            onChange={item.timeChange} 
                                                            onOk={item.getTime}
                                                            /> 
                                                        </div> 
                                                </div>
                                            )
                                     break;
                                    case 'custonLabel':
                                         return(
                                            <div>
                                                <label for="">{item.name}</label>
                                                    <div className='rightC'>
                                                        <div className='custonLabel'>
                                                            { 
                                                                item.data.map((ktem,k)=>{
                                                                    return(
                                                                        <label >{ktem},</label>
                                                                    )
                                                                })
                                                            }
                                                        </div>
                                                        <div  style={item.btnStyle} onClick={item.btnClick}>
                                                            {item.btnTxt}
                                                        </div>
                                                    </div> 
                                            </div>
                                        )
                                    break;
                                     
                               }
                           
                           })
                        }
                    </div>
                    <div className='rightWrap' style={{display:this.config.tree.show?'':'none'}}>
                            <div className='searchBox'>
                                <label for=""> 接收人</label>
                                <input type="" name="" value="" />
                                <div className='btn-inline' onClick={this.searchFn}>
                                    搜索
                                </div>
                            </div>
                           <Tree
                                checkable  
                                expandedKeys={this.config.tree.expandedKeys}
                                onExpand={this.treeExpand}
                                onCheck={this.treeCheck}
                                checkedKeys={this.config.tree.checkedKeys}
                                onSelect={this.treeSelect}
                                selectedKeys={this.config.tree.selectedKeys}
                            >
                                {this.renderTreeNodes(this.config.tree.data)}
                            </Tree>
                    </div>
                </div>
                </Modal>
            </div>
        )
    }
}

export default Popup
